<style scoped></style>

<template>
    <div>
        <Modal
            :title="L('ChangePassword')"
            :value="value"
            @on-ok="save"
            @on-visible-change="visibleChange"
            width="500"
            :mask-closable="false"
        >
            <div>
                <Form ref="changePwdForm" :rules="rules" :model="viewModel">
                    <FormItem :label="L('CurrentPassword')" prop="currentPassword">
                        <Input
                            type="password"
                            v-model="viewModel.currentPassword"
                            :placeholder="L('CurrentPasswordPlaceholder')"
                        ></Input>
                    </FormItem>
                    <FormItem  :label="L('NewPassword')" prop="newPassword">
                        <Input
                            type="password"
                            v-model="viewModel.newPassword"
                            :placeholder="L('NewPasswordPlaceholder')"
                        ></Input>
                    </FormItem>
                    <FormItem :label="L('ConfirmPassword')" prop="confirmNewPassword">
                        <Input
                            type="password"
                            v-model="viewModel.confirmNewPassword"
                            :placeholder="L('ConfirmPasswordPlaceholder')"
                        ></Input>
                    </FormItem>
                </Form>
            </div>
            <div slot="footer">
                <Button @click="cancel">{{L('Cancel')}}</Button>
                <Button @click="save" type="primary">{{L('Update')}}</Button>
            </div>
            <Spin size="large" fix v-if="spinShow"></Spin>
        </Modal>
    </div>
</template>

<script lang="ts">
import { Component, Vue, Inject, Prop, Watch } from "vue-property-decorator";
import Util from "@/lib/util";
import AbpBase from "@/lib/abpbase";
import Ajax from "../lib/ajax";
@Component({
    components: {}
})
export default class ChangePassword extends AbpBase {
    @Prop({ type: Boolean, default: false }) value: boolean;
    spinShow:boolean = false;
    viewModel = {
        currentPassword: "",
        newPassword: "",
        confirmNewPassword: ""
    };

    async save() {
        (this.$refs.changePwdForm as any).validate(async (valid: boolean) => {
            if (valid) {
                try {
                    this.spinShow = true;
                    await Ajax.post('/api/services/app/User/ChangePassword',this.viewModel);
                    //this.spinShow = false;
                    this.$Message.success(this.L('UpdateSuccessMessage',undefined,this.L('Password')));
                    (this.$refs.changePwdForm as any).resetFields();
                    this.$emit("input", false);
                }  finally {
                    this.spinShow = false;
                }
            }
        });
    }
    cancel() {
        (this.$refs.changePwdForm as any).resetFields();
        this.$emit("input", false);
    }
    visibleChange(value: boolean) {
        if (!value) {
            this.$emit("input", value);
        }
    }
    validatePassCheck = (rule: any, value: any, callback: any) => {
        if (value !== this.viewModel.newPassword) {
            callback(new Error(this.L("ConfirmPasswordNotMatch")));
        } else {
            callback();
        }
    };
    rules = {
        currentPassword: [
            {
                required: true,
                message: this.L(
                    "FieldIsRequired",
                    undefined,
                    this.L("CurrentPassword")
                ),
                trigger: "blur"
            }
        ],
        newPassword: [
            {
                required: true,
                message: this.L(
                    "FieldIsRequired",
                    undefined,
                    this.L("NewPassword")
                ),
                trigger: "blur"
            }
        ],
        confirmNewPassword: [
            {
                required: true,
                message:this.L('FieldIsRequired',undefined,this.L('ConfirmPassword')),
                trigger: "blur"
            },
            {
                validator: this.validatePassCheck,
                trigger: "blur"
            }
        ]
    };
}
</script>